
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: History: History + TabView</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<style>
  #demo { width: 300px; }

  #demo img {
    border: 1px solid #000;
    height: 150px;
  }

  #demo .yui3-tab-selected .yui3-tab-label { color: #fff; }
</style>

</head>
<body id="yahoo-com" class="yui3-skin-sam  yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
			<input name="vs" type="hidden" value="yuilibrary.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN, YUILibrary &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: History: History + TabView</h1></div>
</div>
<div id="bd">


	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>History: History + TabView</h2>

	<div id="example" class="promo">
	<div class="example-intro">
	<p>
This example demonstrates how to add browser history support to a TabView widget
using the History Utility.
</p>

<p>
Select a new tab in the TabView below, then use your browser's back button
to return to the previously selected tab. Next, click on one of the images to
visit the Flickr photo page for that image, then use your browser's back button
to return to the current page with the same tab selected.
</p>
	</div>

	<div class="module example-container ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam">
                <a href="history_tabview_clean.html" target="_blank">View example in new window.</a>
            </p>
		</div>		<div id="example-canvas" class="bd">

	
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

	<div id="demo">
  <ul>
    <li><a href="#asparagus">Asparagus</a></li>
    <li><a href="#bird">Bird</a></li>
    <li><a href="#coffee">Coffee</a></li>
  </ul>
  <div>
    <div id="asparagus">
      <a href="http://www.flickr.com/photos/allenr/4686935131/">
        <img src="http://farm5.static.flickr.com/4005/4686935131_253e921bf7_m.jpg" alt="Asparagus">
      </a>
    </div>
    <div id="bird">
      <a href="http://www.flickr.com/photos/allenr/66307916/">
        <img src="http://farm1.static.flickr.com/26/66307916_811efccdfc_m.jpg" alt="Bird">
      </a>
    </div>
    <div id="coffee">
      <a href="http://www.flickr.com/photos/allenr/4638474362/">
        <img src="http://farm4.static.flickr.com/3336/4638474362_093edb7565_m.jpg" alt="Coffee">
      </a>
    </div>
  </div>
</div>

<script>
YUI({ filter: 'raw' }).use("history", "tabview", function (Y) {
  var history = new Y.HistoryHash(),
      tabview = new Y.TabView({srcNode: '#demo'});

  // Render the TabView widget to turn the static markup into an
  // interactive TabView.
  tabview.render();

  // Set the selected tab to the bookmarked history state, or to
  // the first tab if there's no bookmarked state.
  tabview.selectChild(history.get('tab') || 0);

  // Store a new history state when the user selects a tab.
  tabview.after('selectionChange', function (e) {
    // If the new tab index is greater than 0, set the "tab"
    // state value to the index. Otherwise, remove the "tab"
    // state value by setting it to null (this reverts to the
    // default state of selecting the first tab).
    history.addValue('tab', e.newVal.get('index') || null);
  });

  // Listen for history changes from back/forward navigation or
  // URL changes, and update the tab selection when necessary.
  Y.on('history:change', function (e) {
    // Ignore changes we make ourselves, since we don't need
    // to update the selection state for those. We're only
    // interested in outside changes, such as the ones generated
    // when the user clicks the browser's back or forward buttons.
    if (e.src === Y.HistoryHash.SRC_HASH) {

      if (e.changed.tab) {
        // The new state contains a different tab selection, so
        // change the selected tab.
        tabview.selectChild(e.changed.tab.newVal);
      } else if (e.removed.tab) {
        // The tab selection was removed in the new state, so
        // select the first tab by default.
        tabview.selectChild(0);
      }

    }
  });
});
</script>

	<!--END SOURCE CODE FOR EXAMPLE =============================== -->

	
		</div>
	</div>
	</div>

	<h3>HTML</h3>

<p>
First, create the markup for a simple TabView widget with three tabs.
</p>

<div id="syntax-7334c7257f4ca6eaf7a8480ef5bcee06" class="yui-syntax-highlight"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;demo&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">  <span class="sc2">&lt;<span class="kw2">ul</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">li</span>&gt;&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;#asparagus&quot;</span>&gt;</span>Asparagus<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">li</span>&gt;&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;#bird&quot;</span>&gt;</span>Bird<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span></div></li><li class="li2"><div class="de2">    <span class="sc2">&lt;<span class="kw2">li</span>&gt;&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;#coffee&quot;</span>&gt;</span>Coffee<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span></div></li><li class="li1"><div class="de1">  <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">ul</span>&gt;</span></div></li><li class="li1"><div class="de1">  <span class="sc2">&lt;<span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;asparagus&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">      <span class="sc2">&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;http://www.flickr.com/photos/allenr/4686935131/&quot;</span>&gt;</span></div></li><li class="li2"><div class="de2">        <span class="sc2">&lt;<span class="kw2">img</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">&quot;http://farm5.static.flickr.com/4005/4686935131_253e921bf7_m.jpg&quot;</span> <span class="kw3">alt</span><span class="sy0">=</span><span class="st0">&quot;Asparagus&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">      <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;bird&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">      <span class="sc2">&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;http://www.flickr.com/photos/allenr/66307916/&quot;</span>&gt;</span></div></li><li class="li2"><div class="de2">        <span class="sc2">&lt;<span class="kw2">img</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">&quot;http://farm1.static.flickr.com/26/66307916_811efccdfc_m.jpg&quot;</span> <span class="kw3">alt</span><span class="sy0">=</span><span class="st0">&quot;Bird&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">      <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;coffee&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">      <span class="sc2">&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;http://www.flickr.com/photos/allenr/4638474362/&quot;</span>&gt;</span></div></li><li class="li2"><div class="de2">        <span class="sc2">&lt;<span class="kw2">img</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">&quot;http://farm4.static.flickr.com/3336/4638474362_093edb7565_m.jpg&quot;</span> <span class="kw3">alt</span><span class="sy0">=</span><span class="st0">&quot;Coffee&quot;</span>&gt;</span></div></li><li class="li1"><div class="de1">      <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1">  <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;demo&quot;</span>&gt;</span>
  <span class="sc2">&lt;<span class="kw2">ul</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">li</span>&gt;&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;#asparagus&quot;</span>&gt;</span>Asparagus<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">li</span>&gt;&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;#bird&quot;</span>&gt;</span>Bird<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">li</span>&gt;&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;#coffee&quot;</span>&gt;</span>Coffee<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span>
  <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">ul</span>&gt;</span>
  <span class="sc2">&lt;<span class="kw2">div</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;asparagus&quot;</span>&gt;</span>
      <span class="sc2">&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;http://www.flickr.com/photos/allenr/4686935131/&quot;</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">img</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">&quot;http://farm5.static.flickr.com/4005/4686935131_253e921bf7_m.jpg&quot;</span> <span class="kw3">alt</span><span class="sy0">=</span><span class="st0">&quot;Asparagus&quot;</span>&gt;</span>
      <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;</span>
    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;bird&quot;</span>&gt;</span>
      <span class="sc2">&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;http://www.flickr.com/photos/allenr/66307916/&quot;</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">img</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">&quot;http://farm1.static.flickr.com/26/66307916_811efccdfc_m.jpg&quot;</span> <span class="kw3">alt</span><span class="sy0">=</span><span class="st0">&quot;Bird&quot;</span>&gt;</span>
      <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;</span>
    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
    <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;coffee&quot;</span>&gt;</span>
      <span class="sc2">&lt;<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;http://www.flickr.com/photos/allenr/4638474362/&quot;</span>&gt;</span>
        <span class="sc2">&lt;<span class="kw2">img</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">&quot;http://farm4.static.flickr.com/3336/4638474362_093edb7565_m.jpg&quot;</span> <span class="kw3">alt</span><span class="sy0">=</span><span class="st0">&quot;Coffee&quot;</span>&gt;</span>
      <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">a</span>&gt;</span>
    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
  <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></pre></div><textarea id="syntax-7334c7257f4ca6eaf7a8480ef5bcee06-plain"><div id="demo">
  <ul>
    <li><a href="#asparagus">Asparagus</a></li>
    <li><a href="#bird">Bird</a></li>
    <li><a href="#coffee">Coffee</a></li>
  </ul>
  <div>
    <div id="asparagus">
      <a href="http://www.flickr.com/photos/allenr/4686935131/">
        <img src="http://farm5.static.flickr.com/4005/4686935131_253e921bf7_m.jpg" alt="Asparagus">
      </a>
    </div>
    <div id="bird">
      <a href="http://www.flickr.com/photos/allenr/66307916/">
        <img src="http://farm1.static.flickr.com/26/66307916_811efccdfc_m.jpg" alt="Bird">
      </a>
    </div>
    <div id="coffee">
      <a href="http://www.flickr.com/photos/allenr/4638474362/">
        <img src="http://farm4.static.flickr.com/3336/4638474362_093edb7565_m.jpg" alt="Coffee">
      </a>
    </div>
  </div>
</div></textarea></div>
<h3>JavaScript</h3>

<h4>Load history and tabview</h4>

<p>
Load the <code>history</code> and <code>tabview</code> modules.
</p>

<div id="syntax-04ce4326a1811a38481d0d42ac1eeec9" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#123;</span> filter<span class="sy0">:</span> <span class="st0">'raw'</span> <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;history&quot;</span><span class="sy0">,</span> <span class="st0">&quot;tabview&quot;</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">  <span class="co1">// ...implementation code...</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#123;</span> filter<span class="sy0">:</span> <span class="st0">'raw'</span> <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;history&quot;</span><span class="sy0">,</span> <span class="st0">&quot;tabview&quot;</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
  <span class="co1">// ...implementation code...</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-04ce4326a1811a38481d0d42ac1eeec9-plain">YUI({ filter: 'raw' }).use("history", "tabview", function (Y) {
  // ...implementation code...
});</textarea></div>
<h4>Initialize History and TabView</h4>

<p>
Create an instance of the TabView widget
and a history adapter, and restore the bookmarked tab selection, if any.
</p>

<p>
This example uses the <code>Y.HistoryHash</code>
adapter, which stores history state in the hash fragment of the URL. Another
option would be to use the <code>Y.HistoryHTML5</code> adapter, but this would
require additional logic in order to create bookmarkable URLs.
</p>

<p>
Add this code inside the <code>YUI().use()</code> callback from the previous
step.
</p>

<div id="syntax-e9fb3117ba86dfbe932fba48da3c93c9" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> history <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">HistoryHash</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    tabview <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">TabView</span><span class="br0">&#40;</span><span class="br0">&#123;</span>srcNode<span class="sy0">:</span> <span class="st0">'#demo'</span><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="co1">// Render the TabView widget to turn the static markup into an</span></div></li><li class="li2"><div class="de2"><span class="co1">// interactive TabView.</span></div></li><li class="li1"><div class="de1">tabview.<span class="me1">render</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="co1">// Set the selected tab to the bookmarked history state, or to</span></div></li><li class="li1"><div class="de1"><span class="co1">// the first tab if there's no bookmarked state.</span></div></li><li class="li2"><div class="de2">tabview.<span class="me1">selectChild</span><span class="br0">&#40;</span>history.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'tab'</span><span class="br0">&#41;</span> <span class="sy0">||</span> <span class="nu0">0</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> history <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">HistoryHash</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">,</span>
    tabview <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">TabView</span><span class="br0">&#40;</span><span class="br0">&#123;</span>srcNode<span class="sy0">:</span> <span class="st0">'#demo'</span><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="co1">// Render the TabView widget to turn the static markup into an</span>
<span class="co1">// interactive TabView.</span>
tabview.<span class="me1">render</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="co1">// Set the selected tab to the bookmarked history state, or to</span>
<span class="co1">// the first tab if there's no bookmarked state.</span>
tabview.<span class="me1">selectChild</span><span class="br0">&#40;</span>history.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'tab'</span><span class="br0">&#41;</span> <span class="sy0">||</span> <span class="nu0">0</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-e9fb3117ba86dfbe932fba48da3c93c9-plain">var history = new Y.HistoryHash(),
    tabview = new Y.TabView({srcNode: '#demo'});

// Render the TabView widget to turn the static markup into an
// interactive TabView.
tabview.render();

// Set the selected tab to the bookmarked history state, or to
// the first tab if there's no bookmarked state.
tabview.selectChild(history.get('tab') || 0);</textarea></div>
<h4>Add a history entry when the selected tab changes</h4>

<p>
When the user selects a new tab, create a new browser history entry with a
state value named <code>tab</code> that contains the index of the selected tab.
If the first tab is selected, then set the <code>tab</code> state value to
<code>null</code> to remove it from the state, because the first tab is the
default tab.
</p>

<div id="syntax-8085bf0c5fdc51065def42f9bcf9dabf" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// Store a new history state when the user selects a tab.</span></div></li><li class="li1"><div class="de1">tabview.<span class="me1">after</span><span class="br0">&#40;</span><span class="st0">'selectionChange'</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">  <span class="co1">// If the new tab index is greater than 0, set the &quot;tab&quot;</span></div></li><li class="li1"><div class="de1">  <span class="co1">// state value to the index. Otherwise, remove the &quot;tab&quot;</span></div></li><li class="li2"><div class="de2">  <span class="co1">// state value by setting it to null (this reverts to the</span></div></li><li class="li1"><div class="de1">  <span class="co1">// default state of selecting the first tab).</span></div></li><li class="li1"><div class="de1">  history.<span class="me1">addValue</span><span class="br0">&#40;</span><span class="st0">'tab'</span><span class="sy0">,</span> e.<span class="me1">newVal</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'index'</span><span class="br0">&#41;</span> <span class="sy0">||</span> <span class="kw2">null</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// Store a new history state when the user selects a tab.</span>
tabview.<span class="me1">after</span><span class="br0">&#40;</span><span class="st0">'selectionChange'</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
  <span class="co1">// If the new tab index is greater than 0, set the &quot;tab&quot;</span>
  <span class="co1">// state value to the index. Otherwise, remove the &quot;tab&quot;</span>
  <span class="co1">// state value by setting it to null (this reverts to the</span>
  <span class="co1">// default state of selecting the first tab).</span>
  history.<span class="me1">addValue</span><span class="br0">&#40;</span><span class="st0">'tab'</span><span class="sy0">,</span> e.<span class="me1">newVal</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'index'</span><span class="br0">&#41;</span> <span class="sy0">||</span> <span class="kw2">null</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-8085bf0c5fdc51065def42f9bcf9dabf-plain">// Store a new history state when the user selects a tab.
tabview.after('selectionChange', function (e) {
  // If the new tab index is greater than 0, set the "tab"
  // state value to the index. Otherwise, remove the "tab"
  // state value by setting it to null (this reverts to the
  // default state of selecting the first tab).
  history.addValue('tab', e.newVal.get('index') || null);
});</textarea></div>
<h4>Listen for history events to capture back/forward navigation</h4>

<p>
Finally, listen for history change events, which indicate that the user clicked
the back/forward button or manually changed the URL.
</p>

<p>
When a <code>history:change</code> event occurs, it could come from the call to
the <code>addValue()</code> method above or it could come from a change to the
URL hash. We only care about changes that come from the URL hash, since that
indicates a navigation event.
</p>

<div id="syntax-0f83e0bfb51c2e9f2729166e6ea77b03" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// Listen for history changes from back/forward navigation or</span></div></li><li class="li1"><div class="de1"><span class="co1">// URL changes, and update the tab selection when necessary.</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'history:change'</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">  <span class="co1">// Ignore changes we make ourselves, since we don't need</span></div></li><li class="li2"><div class="de2">  <span class="co1">// to update the selection state for those. We're only</span></div></li><li class="li1"><div class="de1">  <span class="co1">// interested in outside changes, such as the ones generated</span></div></li><li class="li1"><div class="de1">  <span class="co1">// when the user clicks the browser's back or forward buttons.</span></div></li><li class="li1"><div class="de1">  <span class="kw1">if</span> <span class="br0">&#40;</span>e.<span class="me1">src</span> <span class="sy0">===</span> Y.<span class="me1">HistoryHash</span>.<span class="me1">SRC_HASH</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    <span class="kw1">if</span> <span class="br0">&#40;</span>e.<span class="me1">changed</span>.<span class="me1">tab</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">      <span class="co1">// The new state contains a different tab selection, so</span></div></li><li class="li1"><div class="de1">      <span class="co1">// change the selected tab.</span></div></li><li class="li1"><div class="de1">      tabview.<span class="me1">selectChild</span><span class="br0">&#40;</span>e.<span class="me1">changed</span>.<span class="me1">tab</span>.<span class="me1">newVal</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">&#40;</span>e.<span class="me1">removed</span>.<span class="me1">tab</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">      <span class="co1">// The tab selection was removed in the new state, so</span></div></li><li class="li1"><div class="de1">      <span class="co1">// select the first tab by default.</span></div></li><li class="li1"><div class="de1">      tabview.<span class="me1">selectChild</span><span class="br0">&#40;</span><span class="nu0">0</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">  <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// Listen for history changes from back/forward navigation or</span>
<span class="co1">// URL changes, and update the tab selection when necessary.</span>
Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'history:change'</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
  <span class="co1">// Ignore changes we make ourselves, since we don't need</span>
  <span class="co1">// to update the selection state for those. We're only</span>
  <span class="co1">// interested in outside changes, such as the ones generated</span>
  <span class="co1">// when the user clicks the browser's back or forward buttons.</span>
  <span class="kw1">if</span> <span class="br0">&#40;</span>e.<span class="me1">src</span> <span class="sy0">===</span> Y.<span class="me1">HistoryHash</span>.<span class="me1">SRC_HASH</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp;
    <span class="kw1">if</span> <span class="br0">&#40;</span>e.<span class="me1">changed</span>.<span class="me1">tab</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
      <span class="co1">// The new state contains a different tab selection, so</span>
      <span class="co1">// change the selected tab.</span>
      tabview.<span class="me1">selectChild</span><span class="br0">&#40;</span>e.<span class="me1">changed</span>.<span class="me1">tab</span>.<span class="me1">newVal</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">&#40;</span>e.<span class="me1">removed</span>.<span class="me1">tab</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
      <span class="co1">// The tab selection was removed in the new state, so</span>
      <span class="co1">// select the first tab by default.</span>
      tabview.<span class="me1">selectChild</span><span class="br0">&#40;</span><span class="nu0">0</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span>
&nbsp;
  <span class="br0">&#125;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-0f83e0bfb51c2e9f2729166e6ea77b03-plain">// Listen for history changes from back/forward navigation or
// URL changes, and update the tab selection when necessary.
Y.on('history:change', function (e) {
  // Ignore changes we make ourselves, since we don't need
  // to update the selection state for those. We're only
  // interested in outside changes, such as the ones generated
  // when the user clicks the browser's back or forward buttons.
  if (e.src === Y.HistoryHash.SRC_HASH) {

    if (e.changed.tab) {
      // The new state contains a different tab selection, so
      // change the selected tab.
      tabview.selectChild(e.changed.tab.newVal);
    } else if (e.removed.tab) {
      // The tab selection was removed in the new state, so
      // select the first tab by default.
      tabview.selectChild(0);
    }

  }
});</textarea></div>
<h4>Complete example source code</h4>

<p>
Here's the complete source code for the example:
</p>

<div id="syntax-41f6f32229f17261504988c97e01ba04" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;demo&quot;</span><span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">  <span class="sy0">&lt;</span>ul<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sy0">&lt;</span>li<span class="sy0">&gt;&lt;</span>a href<span class="sy0">=</span><span class="st0">&quot;#asparagus&quot;</span><span class="sy0">&gt;</span>Asparagus<span class="sy0">&lt;/</span>a<span class="sy0">&gt;&lt;/</span>li<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sy0">&lt;</span>li<span class="sy0">&gt;&lt;</span>a href<span class="sy0">=</span><span class="st0">&quot;#bird&quot;</span><span class="sy0">&gt;</span>Bird<span class="sy0">&lt;/</span>a<span class="sy0">&gt;&lt;/</span>li<span class="sy0">&gt;</span></div></li><li class="li2"><div class="de2">    <span class="sy0">&lt;</span>li<span class="sy0">&gt;&lt;</span>a href<span class="sy0">=</span><span class="st0">&quot;#coffee&quot;</span><span class="sy0">&gt;</span>Coffee<span class="sy0">&lt;/</span>a<span class="sy0">&gt;&lt;/</span>li<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">  <span class="sy0">&lt;/</span>ul<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">  <span class="sy0">&lt;</span>div<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;asparagus&quot;</span><span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">      <span class="sy0">&lt;</span>a href<span class="sy0">=</span><span class="st0">&quot;http://www.flickr.com/photos/allenr/4686935131/&quot;</span><span class="sy0">&gt;</span></div></li><li class="li2"><div class="de2">        <span class="sy0">&lt;</span>img src<span class="sy0">=</span><span class="st0">&quot;http://farm5.static.flickr.com/4005/4686935131_253e921bf7_m.jpg&quot;</span> alt<span class="sy0">=</span><span class="st0">&quot;Asparagus&quot;</span><span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">      <span class="sy0">&lt;/</span>a<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sy0">&lt;/</span>div<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;bird&quot;</span><span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">      <span class="sy0">&lt;</span>a href<span class="sy0">=</span><span class="st0">&quot;http://www.flickr.com/photos/allenr/66307916/&quot;</span><span class="sy0">&gt;</span></div></li><li class="li2"><div class="de2">        <span class="sy0">&lt;</span>img src<span class="sy0">=</span><span class="st0">&quot;http://farm1.static.flickr.com/26/66307916_811efccdfc_m.jpg&quot;</span> alt<span class="sy0">=</span><span class="st0">&quot;Bird&quot;</span><span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">      <span class="sy0">&lt;/</span>a<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sy0">&lt;/</span>div<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;coffee&quot;</span><span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">      <span class="sy0">&lt;</span>a href<span class="sy0">=</span><span class="st0">&quot;http://www.flickr.com/photos/allenr/4638474362/&quot;</span><span class="sy0">&gt;</span></div></li><li class="li2"><div class="de2">        <span class="sy0">&lt;</span>img src<span class="sy0">=</span><span class="st0">&quot;http://farm4.static.flickr.com/3336/4638474362_093edb7565_m.jpg&quot;</span> alt<span class="sy0">=</span><span class="st0">&quot;Coffee&quot;</span><span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">      <span class="sy0">&lt;/</span>a<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sy0">&lt;/</span>div<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">  <span class="sy0">&lt;/</span>div<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1"><span class="sy0">&lt;/</span>div<span class="sy0">&gt;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="sy0">&lt;</span>script<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#123;</span> filter<span class="sy0">:</span> <span class="st0">'raw'</span> <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;history&quot;</span><span class="sy0">,</span> <span class="st0">&quot;tabview&quot;</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">  <span class="kw2">var</span> history <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">HistoryHash</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">      tabview <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">TabView</span><span class="br0">&#40;</span><span class="br0">&#123;</span>srcNode<span class="sy0">:</span> <span class="st0">'#demo'</span><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">  <span class="co1">// Render the TabView widget to turn the static markup into an</span></div></li><li class="li1"><div class="de1">  <span class="co1">// interactive TabView.</span></div></li><li class="li1"><div class="de1">  tabview.<span class="me1">render</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">  <span class="co1">// Set the selected tab to the bookmarked history state, or to</span></div></li><li class="li1"><div class="de1">  <span class="co1">// the first tab if there's no bookmarked state.</span></div></li><li class="li1"><div class="de1">  tabview.<span class="me1">selectChild</span><span class="br0">&#40;</span>history.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'tab'</span><span class="br0">&#41;</span> <span class="sy0">||</span> <span class="nu0">0</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">  <span class="co1">// Store a new history state when the user selects a tab.</span></div></li><li class="li2"><div class="de2">  tabview.<span class="me1">after</span><span class="br0">&#40;</span><span class="st0">'selectionChange'</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="co1">// If the new tab index is greater than 0, set the &quot;tab&quot;</span></div></li><li class="li1"><div class="de1">    <span class="co1">// state value to the index. Otherwise, remove the &quot;tab&quot;</span></div></li><li class="li1"><div class="de1">    <span class="co1">// state value by setting it to null (this reverts to the</span></div></li><li class="li1"><div class="de1">    <span class="co1">// default state of selecting the first tab).</span></div></li><li class="li2"><div class="de2">    history.<span class="me1">addValue</span><span class="br0">&#40;</span><span class="st0">'tab'</span><span class="sy0">,</span> e.<span class="me1">newVal</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'index'</span><span class="br0">&#41;</span> <span class="sy0">||</span> <span class="kw2">null</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">  <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">  <span class="co1">// Listen for history changes from back/forward navigation or</span></div></li><li class="li1"><div class="de1">  <span class="co1">// URL changes, and update the tab selection when necessary.</span></div></li><li class="li2"><div class="de2">  Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'history:change'</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="co1">// Ignore changes we make ourselves, since we don't need</span></div></li><li class="li1"><div class="de1">    <span class="co1">// to update the selection state for those. We're only</span></div></li><li class="li1"><div class="de1">    <span class="co1">// interested in outside changes, such as the ones generated</span></div></li><li class="li1"><div class="de1">    <span class="co1">// when the user clicks the browser's back or forward buttons.</span></div></li><li class="li2"><div class="de2">    <span class="kw1">if</span> <span class="br0">&#40;</span>e.<span class="me1">src</span> <span class="sy0">===</span> Y.<span class="me1">HistoryHash</span>.<span class="me1">SRC_HASH</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">      <span class="kw1">if</span> <span class="br0">&#40;</span>e.<span class="me1">changed</span>.<span class="me1">tab</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="co1">// The new state contains a different tab selection, so</span></div></li><li class="li1"><div class="de1">        <span class="co1">// change the selected tab.</span></div></li><li class="li2"><div class="de2">        tabview.<span class="me1">selectChild</span><span class="br0">&#40;</span>e.<span class="me1">changed</span>.<span class="me1">tab</span>.<span class="me1">newVal</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">      <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">&#40;</span>e.<span class="me1">removed</span>.<span class="me1">tab</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="co1">// The tab selection was removed in the new state, so</span></div></li><li class="li1"><div class="de1">        <span class="co1">// select the first tab by default.</span></div></li><li class="li1"><div class="de1">        tabview.<span class="me1">selectChild</span><span class="br0">&#40;</span><span class="nu0">0</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">      <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">  <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;demo&quot;</span><span class="sy0">&gt;</span>
  <span class="sy0">&lt;</span>ul<span class="sy0">&gt;</span>
    <span class="sy0">&lt;</span>li<span class="sy0">&gt;&lt;</span>a href<span class="sy0">=</span><span class="st0">&quot;#asparagus&quot;</span><span class="sy0">&gt;</span>Asparagus<span class="sy0">&lt;/</span>a<span class="sy0">&gt;&lt;/</span>li<span class="sy0">&gt;</span>
    <span class="sy0">&lt;</span>li<span class="sy0">&gt;&lt;</span>a href<span class="sy0">=</span><span class="st0">&quot;#bird&quot;</span><span class="sy0">&gt;</span>Bird<span class="sy0">&lt;/</span>a<span class="sy0">&gt;&lt;/</span>li<span class="sy0">&gt;</span>
    <span class="sy0">&lt;</span>li<span class="sy0">&gt;&lt;</span>a href<span class="sy0">=</span><span class="st0">&quot;#coffee&quot;</span><span class="sy0">&gt;</span>Coffee<span class="sy0">&lt;/</span>a<span class="sy0">&gt;&lt;/</span>li<span class="sy0">&gt;</span>
  <span class="sy0">&lt;/</span>ul<span class="sy0">&gt;</span>
  <span class="sy0">&lt;</span>div<span class="sy0">&gt;</span>
    <span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;asparagus&quot;</span><span class="sy0">&gt;</span>
      <span class="sy0">&lt;</span>a href<span class="sy0">=</span><span class="st0">&quot;http://www.flickr.com/photos/allenr/4686935131/&quot;</span><span class="sy0">&gt;</span>
        <span class="sy0">&lt;</span>img src<span class="sy0">=</span><span class="st0">&quot;http://farm5.static.flickr.com/4005/4686935131_253e921bf7_m.jpg&quot;</span> alt<span class="sy0">=</span><span class="st0">&quot;Asparagus&quot;</span><span class="sy0">&gt;</span>
      <span class="sy0">&lt;/</span>a<span class="sy0">&gt;</span>
    <span class="sy0">&lt;/</span>div<span class="sy0">&gt;</span>
    <span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;bird&quot;</span><span class="sy0">&gt;</span>
      <span class="sy0">&lt;</span>a href<span class="sy0">=</span><span class="st0">&quot;http://www.flickr.com/photos/allenr/66307916/&quot;</span><span class="sy0">&gt;</span>
        <span class="sy0">&lt;</span>img src<span class="sy0">=</span><span class="st0">&quot;http://farm1.static.flickr.com/26/66307916_811efccdfc_m.jpg&quot;</span> alt<span class="sy0">=</span><span class="st0">&quot;Bird&quot;</span><span class="sy0">&gt;</span>
      <span class="sy0">&lt;/</span>a<span class="sy0">&gt;</span>
    <span class="sy0">&lt;/</span>div<span class="sy0">&gt;</span>
    <span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;coffee&quot;</span><span class="sy0">&gt;</span>
      <span class="sy0">&lt;</span>a href<span class="sy0">=</span><span class="st0">&quot;http://www.flickr.com/photos/allenr/4638474362/&quot;</span><span class="sy0">&gt;</span>
        <span class="sy0">&lt;</span>img src<span class="sy0">=</span><span class="st0">&quot;http://farm4.static.flickr.com/3336/4638474362_093edb7565_m.jpg&quot;</span> alt<span class="sy0">=</span><span class="st0">&quot;Coffee&quot;</span><span class="sy0">&gt;</span>
      <span class="sy0">&lt;/</span>a<span class="sy0">&gt;</span>
    <span class="sy0">&lt;/</span>div<span class="sy0">&gt;</span>
  <span class="sy0">&lt;/</span>div<span class="sy0">&gt;</span>
<span class="sy0">&lt;/</span>div<span class="sy0">&gt;</span>
&nbsp;
<span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
YUI<span class="br0">&#40;</span><span class="br0">&#123;</span> filter<span class="sy0">:</span> <span class="st0">'raw'</span> <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;history&quot;</span><span class="sy0">,</span> <span class="st0">&quot;tabview&quot;</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
  <span class="kw2">var</span> history <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">HistoryHash</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">,</span>
      tabview <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">TabView</span><span class="br0">&#40;</span><span class="br0">&#123;</span>srcNode<span class="sy0">:</span> <span class="st0">'#demo'</span><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
  <span class="co1">// Render the TabView widget to turn the static markup into an</span>
  <span class="co1">// interactive TabView.</span>
  tabview.<span class="me1">render</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
  <span class="co1">// Set the selected tab to the bookmarked history state, or to</span>
  <span class="co1">// the first tab if there's no bookmarked state.</span>
  tabview.<span class="me1">selectChild</span><span class="br0">&#40;</span>history.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'tab'</span><span class="br0">&#41;</span> <span class="sy0">||</span> <span class="nu0">0</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
  <span class="co1">// Store a new history state when the user selects a tab.</span>
  tabview.<span class="me1">after</span><span class="br0">&#40;</span><span class="st0">'selectionChange'</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="co1">// If the new tab index is greater than 0, set the &quot;tab&quot;</span>
    <span class="co1">// state value to the index. Otherwise, remove the &quot;tab&quot;</span>
    <span class="co1">// state value by setting it to null (this reverts to the</span>
    <span class="co1">// default state of selecting the first tab).</span>
    history.<span class="me1">addValue</span><span class="br0">&#40;</span><span class="st0">'tab'</span><span class="sy0">,</span> e.<span class="me1">newVal</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'index'</span><span class="br0">&#41;</span> <span class="sy0">||</span> <span class="kw2">null</span><span class="br0">&#41;</span><span class="sy0">;</span>
  <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
  <span class="co1">// Listen for history changes from back/forward navigation or</span>
  <span class="co1">// URL changes, and update the tab selection when necessary.</span>
  Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'history:change'</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="co1">// Ignore changes we make ourselves, since we don't need</span>
    <span class="co1">// to update the selection state for those. We're only</span>
    <span class="co1">// interested in outside changes, such as the ones generated</span>
    <span class="co1">// when the user clicks the browser's back or forward buttons.</span>
    <span class="kw1">if</span> <span class="br0">&#40;</span>e.<span class="me1">src</span> <span class="sy0">===</span> Y.<span class="me1">HistoryHash</span>.<span class="me1">SRC_HASH</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp;
      <span class="kw1">if</span> <span class="br0">&#40;</span>e.<span class="me1">changed</span>.<span class="me1">tab</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="co1">// The new state contains a different tab selection, so</span>
        <span class="co1">// change the selected tab.</span>
        tabview.<span class="me1">selectChild</span><span class="br0">&#40;</span>e.<span class="me1">changed</span>.<span class="me1">tab</span>.<span class="me1">newVal</span><span class="br0">&#41;</span><span class="sy0">;</span>
      <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="kw1">if</span> <span class="br0">&#40;</span>e.<span class="me1">removed</span>.<span class="me1">tab</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="co1">// The tab selection was removed in the new state, so</span>
        <span class="co1">// select the first tab by default.</span>
        tabview.<span class="me1">selectChild</span><span class="br0">&#40;</span><span class="nu0">0</span><span class="br0">&#41;</span><span class="sy0">;</span>
      <span class="br0">&#125;</span>
&nbsp;
    <span class="br0">&#125;</span>
  <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span></pre></div><textarea id="syntax-41f6f32229f17261504988c97e01ba04-plain"><div id="demo">
  <ul>
    <li><a href="#asparagus">Asparagus</a></li>
    <li><a href="#bird">Bird</a></li>
    <li><a href="#coffee">Coffee</a></li>
  </ul>
  <div>
    <div id="asparagus">
      <a href="http://www.flickr.com/photos/allenr/4686935131/">
        <img src="http://farm5.static.flickr.com/4005/4686935131_253e921bf7_m.jpg" alt="Asparagus">
      </a>
    </div>
    <div id="bird">
      <a href="http://www.flickr.com/photos/allenr/66307916/">
        <img src="http://farm1.static.flickr.com/26/66307916_811efccdfc_m.jpg" alt="Bird">
      </a>
    </div>
    <div id="coffee">
      <a href="http://www.flickr.com/photos/allenr/4638474362/">
        <img src="http://farm4.static.flickr.com/3336/4638474362_093edb7565_m.jpg" alt="Coffee">
      </a>
    </div>
  </div>
</div>

<script>
YUI({ filter: 'raw' }).use("history", "tabview", function (Y) {
  var history = new Y.HistoryHash(),
      tabview = new Y.TabView({srcNode: '#demo'});

  // Render the TabView widget to turn the static markup into an
  // interactive TabView.
  tabview.render();

  // Set the selected tab to the bookmarked history state, or to
  // the first tab if there's no bookmarked state.
  tabview.selectChild(history.get('tab') || 0);

  // Store a new history state when the user selects a tab.
  tabview.after('selectionChange', function (e) {
    // If the new tab index is greater than 0, set the "tab"
    // state value to the index. Otherwise, remove the "tab"
    // state value by setting it to null (this reverts to the
    // default state of selecting the first tab).
    history.addValue('tab', e.newVal.get('index') || null);
  });

  // Listen for history changes from back/forward navigation or
  // URL changes, and update the tab selection when necessary.
  Y.on('history:change', function (e) {
    // Ignore changes we make ourselves, since we don't need
    // to update the selection state for those. We're only
    // interested in outside changes, such as the ones generated
    // when the user clicks the browser's back or forward buttons.
    if (e.src === Y.HistoryHash.SRC_HASH) {

      if (e.changed.tab) {
        // The new state contains a different tab selection, so
        // change the selected tab.
        tabview.selectChild(e.changed.tab.newVal);
      } else if (e.removed.tab) {
        // The tab selection was removed in the new state, so
        // select the first tab by default.
        tabview.selectChild(0);
      }

    }
  });
});
</script></textarea></div>				</div>
				<div class="yui-u sidebar">
	
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    History Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li class='selected'><a href='../history/history_tabview.html'>History + TabView</a></li>							</ul>
						</div>
					</div>

					<div class="mod box4">
                        <div class="hd">
						<h4>More History Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/history/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_history.html">API Documentation</a></li></ul>
                        </div>
					</div>
			  </div>
		</div>

		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="selected "><a title="History - Functional Examples" href="../../examples/history/index.html">History <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../../examples/intl/index.html">Internationalization</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="JSONP (JSON with Padding) - Functional Examples" href="../../examples/jsonp/index.html">JSONP <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Recordset - Functional Examples" href="../../examples/recordset/index.html">Recordset <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Resize - Functional Examples" href="../../examples/resize/index.html">Resize <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Sortable - Functional Examples" href="../../examples/sortable/index.html">Sortable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="Transition - Functional Examples" href="../../examples/transition/index.html">Transition <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Uploader - Functional Examples" href="../../examples/uploader/index.html">Uploader <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YQL Query - Functional Examples" href="../../examples/yql/index.html">YQL Query <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="AutoComplete - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Charts - Functional Examples" href="../../examples/charts/index.html">Charts <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataTable - Functional Examples" href="../../examples/datatable/index.html">DataTable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Dial - Functional Examples" href="../../examples/dial/index.html">Dial <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Editor - Functional Examples" href="../../examples/editor/index.html">Editor <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="ScrollView - Functional Examples" href="../../examples/scrollview/index.html">ScrollView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="TabView - Functional Examples" href="../../examples/tabview/index.html">TabView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2011 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script language="javascript"> 
var yuiConfig = { filter: 'raw' };
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
